<template>
	<view class="container">
		<view class="tab">
			<view :class="['t-item', tab_index==1?'select':'']" @click="tab_index=1">
				<text>商品</text>
			</view>
			<view :class="['t-item', tab_index==2?'select':'']" @click="tab_index=2">
				<text>服务</text>
			</view>
		</view>
		
		<view v-if="tab_index==1" class="padding-about-34 " :style="{paddingTop:'88rpx'}">
			<view v-for="item,index in 12" :key="index" class="view display-flex margin-top-20 alig">
				<image :src="$img_path('/mine/check.png')" style="width: 40rpx;height: 40rpx;" mode="heightFix"></image>
				<!-- <image :src="$img_path('/mine/xcheck.png')" style="width: 40rpx;height: 40rpx;" mode=""></image> -->
				<view class=" display-flex space-between alig margin-left-20" style="width: calc(100% - 60rpx);">
					<image :src="$img_path('/mine/bg.png')" style="width: 260rpx;height: 260rpx;"
						class="border-radius-12" mode="aspectFill"></image>
					<view class="file-1 display-flex flex-direction-column  space-between margin-left-20" style="width: calc(100% - 280rpx);">
						<view class="">
							<view style="width: 100%;" class="font-size-32 overflow-hidden font-weight-bold">
								商品名称商品商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称名称商品名称...
							</view>
							<view class="font-size-24 color-999" style="margin-top: 16rpx;">
								销量：1000
							</view>
							<view class="display-flex" style="margin-top: 16rpx;">
								<view class="tans color-FFF margin-right-10" style="background: #FF6602;border: #FF6602 1rpx solid;">
									标签标签
								</view>
								<view class="tans color-FFF margin-right-10" style="border: #0291FF 1rpx solid; color: #0291FF;">
									标签标签
								</view>
							</view>
						</view>
						<view class="" style="color: #FF2E2E;margin-top: 30rpx;">
							<text class="font-size-32 font-weight-bold">¥ </text><text class="font-weight-bold font-size-40"> 200</text><text class="font-size-24 color-999" style="text-decoration: line-through;margin-left: 14rpx;">￥100.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view v-if="tab_index==2" class="padding-about-34 " :style="{paddingTop:'88rpx'}">
			<view v-for="item,index in 12" :key="index" class="view display-flex margin-top-20 alig">
				<image :src="$img_path('/mine/check.png')" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<!-- <image :src="$img_path('/mine/xcheck.png')" style="width: 40rpx;height: 40rpx;" mode=""></image> -->
				<view class=" display-flex space-between alig margin-left-20">
					<image :src="$img_path('/mine/bg.png')" style="width: 180rpx;height: 180rpx;"
						class="border-radius-12" mode="aspectFill"></image>
					<view class="file-1 display-flex flex-direction-column  space-between margin-left-20">
						<view class="">
							<view style="width: 380rpx;" class="font-size-28 overflow-hidden font-weight-bold">
								商品名称商品商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称名称商品名称...
							</view>
							<view class="font-size-24 color-999">
								销量：1000
							</view>
							<view class="display-flex">
								<view class="tans color-FFF margin-right-10" style="background: #FF6602;border: #FF6602 1rpx solid;">
									标签标签
								</view>
								<view class="tans color-FFF margin-right-10" style="border: #0291FF 1rpx solid; color: #0291FF;">
									标签标签
								</view>
							</view>
						</view>
						<view class="" style="color: #FF2E2E;">
							<text class="font-size-32 font-weight-bold">¥ </text><text class="font-weight-bold font-size-40"> 200</text><text class="font-size-28 color-333">/台</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="kong"></div>
		<div class="kong"></div>
		<div class="kong"></div>
		<view class="bottom position-fixed display-flex alig  ">
			<view class="padding-about-34 width-100 display-flex alig space-between">
				<view class="display-flex alig">
					<image :src="$img_path('/mine/check.png')" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<!-- <image :src="$img_path('/mine/xcheck.png')" style="width: 40rpx;height: 40rpx;" mode=""></image> -->
					<view class="font-size-26 margin-left-10">
						全选
					</view>
				</view>
				<view class="display-flex alig">
					<view @click="login()" class="button text-center color-FFF font-size-26"
						style="width: 276rpx;height: 80rpx;font-size: 32rpx;line-height: 80rpx;">
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navHeight:this.statusBarHeight+this.navBarHeight,
				tab_index:1
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
.container{
	.tab{
		position: fixed;
		left: 0;
		right: 0;
		top: -1rpx;
		width: 100%;
		height: 88rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.t-item{
			&:last-child{
				margin-left: 120rpx;
			}
			text{
				font-weight: 400;
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}
			&.select{
				text{
					color: #333333;
					position: relative;
					&::before{
						content: '';
						width: 60rpx;
						height: 4rpx;
						background: #E72A2A;
						border-radius: 2rpx;
						position: absolute;
						top: calc(100% + 10rpx);
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
}


	.tans {
		padding: 4rpx 20rpx;
		font-size: 18rpx;
		border-radius: 6rpx;
	}

	.bottom {
		bottom: 0;
		width: 750rpx;
		height: 134rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.view {
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>